<template>
  <div class="main">
    <p  class="main_text">仓库调拨</p>
    <!-- ############################################## 查询 ############################################## -->
    <div class="top mb20 p20">
      <el-form :model="searchInputData">
        <div class="df fww">
          <el-form-item label="调拨编号：" style="width: 20%">
            <el-input v-model="searchInputData.transferId" placeholder="调拨编号" class="mr20" />
          </el-form-item>
          <el-form-item label="调拨类型：" style="width: 20%">
            <el-select v-model="searchInputData.contentType" placeholder="调拨类型" class="mr20">
              <el-option label="原材料" value="0" />
              <el-option label="溯源件" value="1" />
              <el-option label="危固废" value="2" />
              <el-option label="非溯源件" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="调入仓库：" style="width: 20%">
            <el-select v-model="searchInputData.inWarehouseId" placeholder="仓库名称" class="mr20">
              <el-option v-for="item in WarehouseList" :key="item.warehouseId" :label="item.warehouseName"
                :value="item.warehouseId" />
            </el-select>
          </el-form-item>
          <el-form-item label="调出仓库：" style="width: 20%">
            <el-select v-model="searchInputData.outWarehouseId" placeholder="仓库名称" class="mr20">
              <el-option v-for="item in WarehouseList" :key="item.warehouseId" :label="item.warehouseName"
                :value="item.warehouseId" />
            </el-select>
          </el-form-item>
          <el-form-item style="width: 20%">
            <el-button type="primary" @click="searchInputDataBtn">查询</el-button>
            <el-button type="primary" plain @click="resc">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- ############################################## 表单 ############################################## -->
    <div class="content p20 cyr-flex" >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="item in tabsList" :key="item.name" :name="item.id" :label="item.name">
          <template #label>
            <div>
              <span>{{ item.name }}</span>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
      <div class="cyr-flex-box">
      <el-table  :data="tableData" style="width: 100%" :header-cell-style="{ background: '#f0f6fe' }"
        :show-overflow-tooltip="true" v-adaptive border>
        <el-table-column label="调拨单据号" prop="transferId" :show-overflow-tooltip="true" />
        <el-table-column label="调拨类型" show-overflow-tooltip>
          <template #default="props">
            <el-text v-if="props.row.contentType == 0" @click="checkAllot(props.row)">原材料</el-text>
            <el-text v-else-if="props.row.contentType == 1" @click="checkAllot(props.row)">溯源件</el-text>
            <el-text v-else-if="props.row.contentType == 2" @click="checkAllot(props.row)">危固废</el-text>
            <el-text v-else @click="checkAllot(props.row)">非溯源件</el-text>
          </template>
        </el-table-column>
        <el-table-column label="调拨时间" prop="transferDate" :show-overflow-tooltip="true" />
        <el-table-column label="调出仓库" prop="outWarehouse" :show-overflow-tooltip="true" />
        <el-table-column label="调入仓库" prop="inWarehouse" :show-overflow-tooltip="true" />
        <el-table-column label="调拨人" prop="employeeName" :show-overflow-tooltip="true" />
        <el-table-column label="调拨总数量" prop="num" :show-overflow-tooltip="true" />
        <el-table-column label="审核状态">
          <template #default="props">
            <el-text type="warning" v-if="props.row.auditStatus == 0">审核中</el-text>
            <el-text type="danger" v-else-if="props.row.auditStatus == 1">未通过</el-text>
            <el-text type="success" v-else>已通过</el-text>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120">
          <template #default="props">
            <el-button size="small" link type="primary" @click="checkAllot(props.row)"
              v-if="roleList.read">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="Number(total)"
        @change="handleCurrentChange" />
      </div>
    </div>
    <el-dialog class="dialog" v-model="centerDialogVisible" width="40%" align-center>
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">查看调拨单</p>
        </div>
      </template>
      <el-form :model="searchInputData" class="df fww jcsb" label-width="7.5rem" label-position="left">
        <el-form-item label="调拨单号：" style="width: 48%" class="df ais">
          <el-text>{{ checkData.transferId }}</el-text>
        </el-form-item>
        <el-form-item label="调拨总品类：" style="width: 48%" class="df ais">
          <el-text v-if="checkData.contentType == 0">原材料</el-text>
          <el-text v-else-if="checkData.contentType == 1">溯源件</el-text>
          <el-text v-else-if="checkData.contentType == 2">危固废</el-text>
          <el-text v-else>非溯源件</el-text>
        </el-form-item>
        <el-form-item label="调拨时间：" style="width: 48%" class="df ais">
          <el-text>{{ checkData.transferDate }}</el-text>
        </el-form-item>
        <el-form-item label="调拨人：" style="width: 48%" class="df ais">
          <el-text>{{ checkData.employeeName }}</el-text>
        </el-form-item>
        <el-form-item label="调出仓库：" style="width: 48%" class="df ais">
          <el-text>{{ checkData.outWarehouse }}</el-text>
        </el-form-item>
        <el-form-item label="调入仓库：" style="width: 48%" class="df ais">
          <el-text>{{ checkData.inWarehouse }}</el-text>
        </el-form-item>
        <el-form-item v-if="checkData.contentType != 1" label="调拨商品类型：" style="width: 48%" class="df ais">
          <el-text>{{ checkData.type_name }}</el-text>
        </el-form-item>
        <el-form-item v-if="checkData.contentType != 1" label="调拨总数量：" style="width: 48%" class="df ais">
          <el-text>{{ checkData.num }}</el-text>
        </el-form-item>
        <el-form-item v-if="reject.auditResult == 1" label="调拨总数量：" style="width: 48%" class="df ais">
          <el-text>{{ reject.rejectReason }}</el-text>
        </el-form-item>
        <!-- 入库商品----溯源件 -->
        <el-table v-else-if="checkData.contentType == 1" :data="recordsTableData" size="small" style="width: 100%"
          class="mt20" :header-cell-style="{ background: '#ebeef5' }" border>
          <el-table-column label="配件编号" prop="fittingId" show-overflow-tooltip />
          <el-table-column label="配件名称" prop="fittingName" show-overflow-tooltip />
          <el-table-column label="品牌" prop="brand" show-overflow-tooltip />
          <el-table-column label="车型" prop="modelName" show-overflow-tooltip />
          <el-table-column label="车系" prop="series" show-overflow-tooltip />
          <el-table-column label="仓库位置" prop="warehouseArea" show-overflow-tooltip />
        </el-table>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <div class="df jcsb">
            <div>
              <!-- <el-button type="primary" link> <el-icon class="icondy">
                                    <Wallet />
                                </el-icon>&nbsp;打印此出库单</el-button> -->
            </div>
            <div>
              <el-button @click="centerDialogVisible = false">取消</el-button>
            </div>
          </div>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { Wallet } from '@element-plus/icons-vue';
import {
  RequestTransferGetlistlimit,
  RequestTransferTransferAudit,
  RequestTransferDetail,
  RequestWarehouseList,
} from '@/api/path/index.js';
import { Edit } from '@element-plus/icons-vue';
import { formatTime } from '@/filters/index';
import { ref } from 'vue';
import useAuthorize from '@/hooks/authorize';
let roleList = useAuthorize();
const activeName = ref('-1');
/* ************************ 查询 ************************ */
const tabsList = ref<any>([
  {
    name: '全部',
    id: '-1',
  },
  {
    name: '审核中',
    id: '0',
  },
  {
    name: '已通过',
    id: '2',
  },
  {
    name: '未通过',
    id: '1',
  },
])
const searchInputData = ref<any>({
  auditStatus: '',
  inWarehouseId: '',
  outWarehouseId: '',
  transferId: '',
});
const searchInputDataBtn = () => {
  activeName.value = '-1';
  currentPage.value = 1;
  getData(status.value);
};
/* ************************ 查询 ************************ */
const resc = () => {
  (searchInputData.value.auditStatus = ''),
    (searchInputData.value.inWarehouseId = ''),
    (searchInputData.value.outWarehouseId = ''),
    (searchInputData.value.transferId = ''),
    (searchInputData.value.contentType = ''),
    currentPage.value = 1;
    activeName.value = '-1';
    getData('');
};
/* ************************ 获取仓库下拉数据 ************************ */
const WarehouseList = ref<any>([]);
const getWarehouseList = () => {
  RequestWarehouseList().then((res: any) => {
    WarehouseList.value = res.resultObj;
  });
};
getWarehouseList();
const tableData = ref<any>([]);
const multipleSelection = ref<any>([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};
const centerDialogVisible = ref<any>(false);
/* ************************ 分页获取数据 ************************ */
const status = ref<any>('');
const total = ref<any>(1);
const total1 = ref<any>(1);
const total2 = ref<any>(1);
const total3 = ref<any>(1);
const currentPage = ref(1);
const pageSize = ref(10);
// const changeAuditStatus = (e: any) => {
//     status.value = e
// }
const getData = (status: any) => {
  // console.log(status);
  RequestTransferGetlistlimit({
    page: currentPage.value,
    rows: pageSize.value,
    auditStatus: status,
    inWarehouseId: searchInputData.value.inWarehouseId,
    outWarehouseId: searchInputData.value.outWarehouseId,
    transferId: searchInputData.value.transferId,
    contentType: searchInputData.value.contentType,
  }).then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      item.createdAt = formatTime(item.createdAt);
      item.transferDate = formatTime(item.transferDate);
      item.updatedAt = formatTime(item.updatedAt);
    });
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
    total1.value = res.resultObj.total;
    total2.value = res.resultObj.total;
    total3.value = res.resultObj.total;
  });
};
getData(status.value);
const handleClick = (tab: any, event: any) => {
  currentPage.value = 1;
  if (tab.props.name == '-1') {
    status.value = '';
    getData(status.value);
  } else {
    status.value = tab.props.name;
    getData(status.value);
  }
};
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  getData(status.value);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  getData(status.value);
};
/* ************************ 查看 ************************ */
const checkData = ref<any>({});
const reject = ref<any>({});
const recordsTableData = ref<any>([]);
const checkAllot = (row: any) => {
  checkData.value = row;
  console.log('checkData.value', checkData.value);
  centerDialogVisible.value = true;
  RequestTransferDetail(row.transferId).then((res: any) => {
    console.log(res.resultObj);
    checkData.value.type_name = res.resultObj.type_name;
    checkData.value.operatorName = res.resultObj.发起人;
    reject.value = res.resultObj.审核结果;
    recordsTableData.value = res.resultObj.fittings;
  });
};

// /* ************************ 审核 ************************ */
// const auditTableData = ref<any>()
// const auditData = (row: any) => {
//     console.log(row);
//     auditTableData.value = row
//     checkcenterDialogVisible.value = true
// }
// /* ************************ 提交审核 ************************ */
// const submitAudit = () => {
//     auditTableData.value.createdAt = ''
//     auditTableData.value.transferDate = ''
//     auditTableData.value.updatedAt = ''
//     console.log(auditTableData.value);

//     RequestTransferTransferAudit(auditTableData.value).then((res: any) => {
//         if (res.code == 0) {
//             ElMessage.success(res.msg)
//             checkcenterDialogVisible.value = false
//             getData(status.value)
//         } else {
//             ElMessage.error(res.msg)
//             checkcenterDialogVisible.value = false
//             getData(status.value)
//         }
//     })
// }
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }
}

.icon_i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6.875rem;
  right: 0;
  margin: auto 0;
}

.downLoad {
  line-height: 1rem;
  margin-left: 0.625rem;
  color: #116cf8;
}

.el-select {
  width: 100%;
}

.el-input-number {
  width: 100%;
}

.drawer_top {
  width: 100%;
  background-color: #fff;
  border-radius: 0.5rem;
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;
  }

  .el-dialog__title {
    color: #fff;
  }

  .dialog {
    .el-icon svg {
      color: #fff;
    }
  }

  .el-button {
    .el-icon svg {
      color: #116cf8;
    }
  }
}

::v-deep .el-drawer {
  .el-overlay .el-icon svg {
    color: red;
  }

  .el-drawer__header {
    margin-bottom: 0;
  }
}

.DocumentNumber {
  .el-button {
    background-color: #fff;
    border: 0.0625rem solid #dcdfe6;
    border-left: none;
  }
}

.drawer_bottom {
  width: 100%;
  height: 10%;
  background-color: #fff;
  padding: 1.25rem;
  position: absolute;
  bottom: 0;
  right: 0;
}

.addTable {
  width: 100%;
  text-align: center;
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: #e7f0fe;
  border: 0.0625rem dotted #116cf8;
  margin-top: 0.375rem;
  color: #116cf8;
  user-select: none;
  cursor: pointer;
}
</style>
